<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>纯html和css实现的tooltip</title>
  <style>
      .box {
          width: 200px;
          height: 100px;
          text-align: center;
          line-height: 100px;
          cursor: pointer;
          position: relative;
          background: black;
          color: #fff;
      }

      /*鼠标移入时显示*/
      .box:hover .tooltip{
          display: block;
      }

      /*防止鼠标移动过程中提示内容消失*/
      .shelter {
          opacity: 0;
          position: absolute;
          left: 200px;
          top: 0;
          height: 100px;
          width: 20px;
          z-index: 2;
          background: red;
      }

      /*三角形*/
      .tooltip:before {
          content: "";
          position: absolute;
          left: -20px;
          top: 50%;
          transform: translateY(-50%);
          border-bottom: 20px solid transparent;
          border-top: 20px solid transparent;
          border-right: 20px solid green;
          z-index: 2;
      }
      .tooltip {
          display: none;
          position: absolute;
          left: 220px;
          background: green;
          height: 100px;
          width: 200px;
          top: 0;
          z-index: 2;
          padding: 0 20px;
      }
  </style>
</head>
<body>

<div class="box">
  <span>tooltip</span>

  <div class="shelter"></div>
  <div class="tooltip">
    This is a tooltip
  </div>
</div>
</body>
</html>